<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" fullscreen>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small">
        <div style="display:flex">
          <div class="linkBox">
            <li v-for="(item, index) in listLink" :key="item.id"
                :class="activeNum === index ? 'active' : 'iclass'">
              <a :href="'#' + item.id" :class="activeNum === index ? 'activeFont' : 'maodianFont'"
                 @click="active(index)">{{ item.name }}</a>
            </li>
          </div>

          <div class="formBox">
            <div class="steps">
              <el-steps :space="300" :active="activeSteps" finish-status="success" align-center>
                <el-step v-for="(item, index) in stepList" :key="index" :title="item.processName"
                         :description="item.processDate"></el-step>
              </el-steps>
            </div>
            <div>
            </div>
            <div class="formtop">
              <div class="formcenter" @click="showMsg"><a name="part1">工单基本信息</a></div>
              <div class="formbottom" v-if="showBox">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="巡视工单名称:" prop="taskName">
                      <el-input v-model="ruleForm.taskName" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="运维单位:" prop="maintainUnitName">
                      <el-input v-model="ruleForm.maintainUnitName" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="运维班组:" prop="maintainTeamName">
                      <el-input v-model="ruleForm.maintainTeamName" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="巡视类型:" prop="patrolTypeName">
                      <el-input v-model="ruleForm.patrolTypeName" placeholder="无数据" clearable
                                disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="计划开始时间:" prop="planStartTime">
                      <el-input v-model="ruleForm.planStartTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="计划结束时间:" prop="planEndTime">
                      <el-input v-model="ruleForm.planEndTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="巡视机房:" prop="patrolRoomName">
                      <el-input v-model="ruleForm.patrolRoomName" placeholder="无数据" clearable
                                disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="巡视对象:" prop="patrolTargetNames">
                      <el-input v-model="ruleForm.patrolTargetNames" placeholder="无数据" clearable
                                disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="巡视内容:" prop="patrolDescription">
                      <el-input v-model="ruleForm.patrolDescription" placeholder="无数据" clearable
                                disabled type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="formtop">
              <div class="formcenter"><a name="part2">派接单信息</a></div>
              <div class="formbottom">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单人:" prop="sendPersonName">
                      <el-input v-model="ruleForm.sendPersonName" placeholder="无数据" clearable
                                disabled></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单电话:" prop="sendTel">
                      <el-input v-model="ruleForm.sendTel" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="派单时间:" prop="sendTime">
                      <el-input v-model="ruleForm.sendTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <!-- <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                      <el-form-item label="接单班组:" prop="sendTime">
                          <el-input v-model="ruleForm.sendTime" placeholder="无数据" clearable disabled>
                          </el-input>
                      </el-form-item>
                  </el-col> -->
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单人:" prop="receiver">
                      <el-input v-model="ruleForm.receiver" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单电话:" prop="receiverTel">
                      <el-input v-model="ruleForm.receiverTel" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="接单时间:" prop="receiverTime">
                      <el-input v-model="ruleForm.receiverTime" placeholder="无数据" clearable disabled>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div class="formtop">
              <div class="formcenter"><a name="part3">接单人认证信息</a></div>
              <div class="formbottom">
                <div style="display: flex">
                  <div class="textwidth">接单人照片</div>
                  <div style="display: flex">
                    <el-card style="height: 250px;width: 250px;">
                      <el-image :src="authPictureUrl" class="image" :preview-src-list="dialogImageUrlList"/>
                      <div style="padding: 14px">
                        <div>
                          <div>{{ ruleForm.receiver }}</div>
                          <div class="time">时间:{{ ruleForm.receiverTime }}</div>

                        </div>
                      </div>
                    </el-card>

                  </div>
                </div>
              </div>
            </div>

            <div class="formtop">
              <div class="formcenter"><a name="part4">现场巡视</a></div>

              <div class="formbottom">
                <div style="display: flex">
                  <div class="textwidth">到达现场图片</div>
                  <div style="display: flex">

                    <div v-for="o in 5" :key="o" style="margin-right: 5px;width: 250px;height: 250px;">
                      <el-card style="height: 250px;">
                        <el-image :src="dialogImageUrl" class="image" :preview-src-list="dialogImageUrlList"/>
                        <div style="padding: 14px">
                          <span>到达现场图片</span>
                          <div>
                            <time class="time">{{ currentDate }}</time>
                            <div style="display:flex;justify-content: space-between;align-items: center;height: 25px;">
                              <div>李志辉</div>
                              <div>
                                <el-button type="text" class="button"
                                           @click="handlePictureCardPreview()">放大
                                </el-button>
                                <el-button type="text" class="button"
                                           @click="handleDownload(file)">下载
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </div>

                  </div>
                </div>
                <div style="display: flex; margin-top: 4px">
                  <div class="textwidth">配电箱照片</div>
                  <div style="display: flex">
                    <div v-for="o in 5" :key="o" style="margin-right: 5px;width: 250px;height: 250px;">
                      <el-card style="height: 250px;">
                        <el-image :src="dialogImageUrl" class="image" :preview-src-list="dialogImageUrlList"/>
                        <div style="padding: 14px">
                          <span>到达现场图片</span>
                          <div>
                            <time class="time">{{ currentDate }}</time>
                            <div style="display:flex;justify-content: space-between;align-items: center;height: 25px;">
                              <div>李志辉</div>
                              <div>
                                <el-button type="text" class="button"
                                           @click="handlePictureCardPreview()">放大
                                </el-button>
                                <el-button type="text" class="button"
                                           @click="handleDownload(file)">下载
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </div>

                  </div>
                </div>
                <div style="display: flex; margin-top: 4px">
                  <div class="textwidth">循环泵照片</div>
                  <div style="display: flex">

                    <div v-for="o in 5" :key="o" style="margin-right: 5px;width: 250px;height: 250px;">
                      <el-card style="height: 250px;">
                        <el-image :src="dialogImageUrl" class="image" :preview-src-list="dialogImageUrlList"/>
                        <div style="padding: 14px">
                          <span>到达现场图片</span>
                          <div>
                            <time class="time">{{ currentDate }}</time>
                            <div style="display:flex;justify-content: space-between;align-items: center;height: 25px;">
                              <div>李志辉</div>
                              <div>
                                <el-button type="text" class="button"
                                           @click="handlePictureCardPreview()">放大
                                </el-button>
                                <el-button type="text" class="button"
                                           @click="handleDownload(file)">下载
                                </el-button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-card>
                    </div>

                  </div>
                </div>
                <div>隐患信息-详情</div>
                <vxe-table border stripe ref="selectedEquip" height="200" :data="list1.data">
                  <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
                  <vxe-column field="equipTypeName" align="center" title="审核" minWidth="150">
                  </vxe-column>
                  <vxe-column field="equipTypeName" title="审核情况" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="equipName" title="隐患类型" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="projectName" title="隐患设备" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患部位" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患名称" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患分类" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患性质" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患详细地点" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="隐患描述" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="缺陷发现日期" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="缺陷照片" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="现场是否已处理" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="methodName" title="处理后照片" align="center" minWidth="150">
                  </vxe-column>
                </vxe-table>
                <div>缺陷信息-详情</div>
                <vxe-table border stripe ref="selectedEquip" height="200" :data="list2.data">
                  <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
                  <vxe-column v-if="row.ptaskStatusNo === '5' ? true : false" field="defectStatusCode" align="center"
                              title="审核" minWidth="180">
                    <template v-slot="{ row }">
                      <el-row>
                        <el-button v-if="row.defectStatusCode === '1'" type="primary" size="mini"
                                   @click="handleClick(row, 1)">通过
                        </el-button>
                        <el-button v-if="row.defectStatusCode !== '1'" type="info" size="mini" disabled>通过</el-button>
                        <el-button v-if="row.defectStatusCode === '1'" type="primary" size="mini"
                                   @click="handleClick(row, 2)">不通过
                        </el-button>
                        <el-button v-if="row.defectStatusCode !== '1'" type="info" size="mini" disabled>不通过
                        </el-button>
                      </el-row>
                    </template>
                  </vxe-column>
                  <vxe-column field="defectStatusName" title="审核情况" align="center" minWidth="150">
                  </vxe-column>
                  <!-- <vxe-column field="defectDescription" title="缺陷程度描述" align="center" minWidth="150">
                  </vxe-column> -->
                  <vxe-column field="equipName" title="缺陷设备" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectParts" title="缺陷部位" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectName" title="缺陷名称" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="equipTypeName" title="设备类型名称" align="center" minWidth="150">
                  </vxe-column>
                  <!-- <vxe-column field="methodName" title="设备种类名称" align="center" minWidth="150">
                  </vxe-column> -->
                  <vxe-column field="partName" title="部件名称" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectParts" title="部位名称" align="center" minWidth="150">
                  </vxe-column>
                  <!-- <vxe-column field="defectDescription" title="缺陷内容" align="center" minWidth="150">
                  </vxe-column> -->
                  <!-- <vxe-column field="methodName" title="缺陷级别" align="center" minWidth="150">
                  </vxe-column> -->
                  <vxe-column field="defectAddress" title="缺陷详细地点" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectDescription" title="缺陷描述" align="center" minWidth="150">
                  </vxe-column>
                  <!-- <vxe-column field="methodName" title="隐患发现日期" align="center" minWidth="150">
                  </vxe-column> -->
                  <!-- <vxe-column field="methodName" title="隐患照片" align="center" minWidth="150">
                  </vxe-column> -->
                  <vxe-column field="isHandle" title="现场是否已处理" align="center" minWidth="150">
                  </vxe-column>
                  <!-- <vxe-column field="methodName" title="处理后照片" align="center" minWidth="150">
                  </vxe-column> -->
                </vxe-table>
              </div>
            </div>
            <div class="formtop">
              <div class="formcenter"><a>历史已处理缺陷隐患</a></div>
              <div class="formbottom">
                <vxe-table border stripe ref="selectedEquip" height="200" :data="list3.data">
                  <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
                  <vxe-column field="defectName" title="缺陷名称" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="teamName" title="发现班组" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="creatTime" title="发现日期" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="creator" title="发现人" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectAddress" title="缺陷隐患地址" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectPictureIds" title="缺陷隐患照片" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="isExit" title="缺陷隐患是否仍存在" align="center" minWidth="150">
                    <template v-slot="{ row }">
                      <el-row>
                        <span v-if="row.isExit === '1'">存在</span>
                        <span v-if="row.isExit === '2'">不存在</span>
                      </el-row>
                    </template>
                  </vxe-column>
                  <vxe-column field="defectAddress" title="处理结果" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="beforePictureIds" title="消缺前照片" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="inPictureIds" title="消缺中照片" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="afterPictureIds" title="消缺后照片" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="defectDescription" title="未处理原因" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="dealMethod" title="处理方法" align="center" minWidth="150">
                  </vxe-column>
                  <vxe-column field="remark" title="备注" align="center" minWidth="150">
                  </vxe-column>
                </vxe-table>
              </div>
            </div>
            <div class="formtop">
              <div class="formcenter"><a name="part5">巡视结论</a></div>
              <div class="formbottom">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="" prop="conclusion" label-width="0">
                      <el-input v-model="ruleForm.conclusion" placeholder="根据盘点详情自动生成" clearable
                                disabled type="textarea"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </div>
            </div>

            <div class="formtop">
              <div class="formcenter"><a name="part6">工单质量评价</a></div>
              <div class="formbottom">
                <el-row gutter="16" justify="start">
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item v-if="isDisabled" label="评价结论:" prop="appraiseStatusName">
                      <el-input v-model="ruleForm.appraiseStatusName" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                    <el-form-item v-if="!isDisabled" label="评价结论:" prop="appraiseStatus">
                      <el-select v-model="ruleForm.appraiseStatus" placeholder="请选择评价结论" clearable
                                 style="width: 100%" @change="appraiseStatusChange">
                        <el-option v-for="item in appraiseStatusOptions" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-show="appraiseContentShow" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <el-form-item label="评价说明:" prop="appraiseContent">
                      <el-input v-model="ruleForm.appraiseContent" placeholder="无数据" clearable
                                :disabled="isDisabled" type="textarea"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="评价人:" prop="appraisePersonName">
                      <el-input v-model="ruleForm.appraisePersonName" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                    <el-form-item label="评价时间:" prop="appraiseTime">
                      <el-input v-model="ruleForm.appraiseTime" placeholder="无数据" clearable
                                :disabled="isDisabled"></el-input>
                    </el-form-item>
                  </el-col>

                </el-row>
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <span v-if="!isDisabled" slot="footer" class="dialog-footer">
                <el-button @click="handleCancel()" :size="size" icon="fa fa-minus-square-o">取消</el-button>
                <el-button type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import FormEvent from "../model/workOrderManagement-form";
import {workOrderManagement} from '@/api/patrol/workOrderManagement.js'

export default {
  components: {},
  data() {
    return {
      showBox: true,
      appraiseContentShow: false,
      dialogProps: {
        visible: false,
        title: "过程监视",
      },
      footerVisible: true,
      size: "medium",
      ruleForm: FormEvent.FormData,
      rules: FormEvent.rules,
      disabledForm: true,
      isDisabled: true,
      appraiseStatusOptions: [{label: '合格', value: '1'}, {label: '不合格', value: '2'},],
      zxoptions: [],
      xsnrShow: true,
      list: {
        data: []
      },
      list1: {
        data: []
      },
      list2: {
        data: []
      },
      list3: {
        data: []
      },
      row: {},
      classFont: 'fa fa-caret-down',
      listLink: [
        {id: 'part1', name: '工单基本信息'},
        {id: 'part2', name: '派接单信息'},
        {id: 'part3', name: '接单人'},
        {id: 'part4', name: '现场巡视'},
        {id: 'part5', name: '巡视结束'},
        {id: 'part6', name: '指挥中心评价'},
      ],
      activeNum: 0,
      activeSteps: 2,
      stepList: [{processName: "工单编制"},
        {processName: "派单"},
        {processName: "接单"},
        {processName: "现场盘点"},
        {processName: "质量评价"},
        {processName: "归档"},
      ],
      authPictureUrl: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
      dialogImageUrl: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
      dialogImageUrlList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',],
      currentDate: '2022-9-9 10:10:00'
    };
  },
  methods: {
    showDialog(row) {
      this.row = row.row
      this.getstepList()
      this.getTable()
      this.dialogProps.visible = true;
      for (let key in this.ruleForm) {
        this.ruleForm[key] = this.row[key];
      }
      if (row.row.ptaskStatusNo === '5') {
        this.isDisabled = false
      } else {
        this.isDisabled = true
      }
      if (this.ruleForm.authPictureIds && this.ruleForm.authPictureIds.length > 10) {
        if (this.ruleForm.authPictureIds.startsWith("http")) {
          console.log(1111)
          this.authPictureUrl = this.ruleForm.authPictureIds;
        } else {
          console.log(this.udsImageUrl + this.ruleForm.authPictureIds + "/user.png")
          this.authPictureUrl = this.udsImageUrl + this.ruleForm.authPictureIds + "/user.png"
        }
      }
    },
    active(index) {
      this.activeNum = index
    },

    showMsg() {
      if (this.showBox) {
        this.showBox = false
      } else {
        this.showBox = true
      }
    },
    getstepList() {
      workOrderManagement.getTaskOperateList(this.row.taskNo).then(res => {
        this.stepList = res.data.operateVoList
        this.activeSteps = res.data.activeSteps


      }).catch(err => {

      })


    },
    getTable() {
      // workOrderManagement.getTaskEquipList(this.row.taskNo).then(res => {
      //     this.list.data = res.data
      // }).catch(err => {

      // })
      workOrderManagement.getTaskDefectList(this.row.taskNo).then(res => {
        this.list2.data = res.data
      }).catch(err => {

      })
      workOrderManagement.getTaskHandleDefectList(this.row.taskNo).then(res => {
        this.list3.data = res.data
      }).catch(err => {

      })
    },

    //编辑渲染
    initData() {

    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview() {

    },
    handleDownload(file) {
      console.log(file);
    },

    //确定
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const queryParam = Object.assign({}, this.ruleForm)

          const params = [{
            id: this.row.id,
            ...queryParam,
          }]
          workOrderManagement.updateData(params).then(res => {
            if (res.code === '200') {
              this.$message.success('评价成功')
              this.handleCancel()
              this.$emit('onSearch')
            }

          }).catch(err => {


          })


          this.handleCancel()
          this.dialogProps.visible = false;
        } else {
          return false;
        }
      });
    },
    //取消
    handleCancel() {
      this.$refs.ruleForm.resetFields()
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.dialogProps.visible = false;

    },
    appraiseStatusChange(value) {
      this.ruleForm.appraiseStatusName = '';
      if (value) {
        let arr = this.appraiseStatusOptions.filter(item => {
          return item.value == value;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.appraiseStatusName = arr[0].label;
        }
      }
      if (value == '2') {
        this.appraiseContentShow = true
      } else {
        this.appraiseContentShow = false
      }

    }
  },
};

</script>
<style>
.linkBox {
  width: 7%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(170, 170, 170, 1);
  border-radius: 10px;
  padding: 10px 5px;
  position: fixed;
  bottom: 50%;
  left: 0;
}

.iclass {
  border: 1px solid rgba(215, 215, 215, 1);
  color: #333;
  list-style: none;
}

.iclass:hover {
  background: rgba(231, 241, 253, 1);
}

.active {
  list-style: none;
  color: #0e867f;
  border: 1px solid rgba(215, 215, 215, 1);
  background: rgba(231, 241, 253, 1);
}

.maodianFont {
  height: 54px;
  line-height: 34px;
  font-size: 18px;
  text-decoration: none;
  font-family: '微软雅黑';
  color: #333;
}

.maodianFont:hover {
  color: #0e867f;
}

.activeFont {
  height: 54px;
  line-height: 34px;
  font-size: 18px;
  text-decoration: none;
  font-family: '微软雅黑';
  color: #0e867f;
}

.formBox {
  width: 92%;
  margin-left: 8%;
}

.steps {
  padding: 0 20px;
}

.formtop {
  margin-bottom: 10px;
}

.formcenter {
  width: 100%;
  height: 34px;
  line-height: 34px;
  color: #fff;
  border-radius: 4px;
  background: #009688;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;

}

.formbottom {
  border-left: 2px solid #b0dbe1;
  border-right: 2px solid #b0dbe1;
  border-bottom: 2px solid #b0dbe1;
  background: #b0dbe129;
  padding: 10px;

}

.textwidth {
  padding-left: 10px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100%;
  display: block;
  height: 150px;
}
</style>

